
import { log } from "console";
import { Component } from "react";
import type { ReactNode } from 'react'


interface iState {
    msg: string

}
export default class App extends Component {

    props = {
        name: ''
    }

    state: iState = {
        msg: '今天的太阳可真厉害啊'
    }

    btnClick() {
        // console.log('被点击了');
        // 1. 该写法是最常用的写法
        // this.setState({
        //     msg: '晚上我要开空调'
        // })


        // 2. 不常用写法，可以传递一个回调函数，在数据变化后做某些操作
        // this.setState({
        //     msg: '晚上我要开空调'
        // }, () => {
        //     // 数据修改后的回调函数
        //     // console.log('修改成功');
        //     // document.getElementById('h1') 找到页面中的 id 是 h1 的标签
        //     // .innerText  后去标签中的内容
        //     console.log(document.getElementById('h1')?.innerText);
        // })

        // 3. 不常用，return 出的内容就是要改变的内容
        // 可以获取到原来的值和 Props
        this.setState((prevState, props) => {
            // prevState 修改之前的值
            // props 父组件传递过来的值
            console.log(prevState, props);

            // return 出去的内容就是要修改的内容
            return {
                msg: '晚上我不开空调，准备修仙'
            }
        })

    }

    render() {

        return <>
            <div>
                <h1 id="h1">父组件 -- {this.state.msg}</h1>

                <button onClick={() => this.btnClick()}>修改 msg</button>
            </div>
        </>
    }

}